<template>
  <!-- 通用订单信息 -->
  <div class="card">
    <table class="table table-striped table-hover table-sm">
      <thead>
        <tr>
          <th class="text-center">账单号</th>
          <th class="text-center">日期</th>
          <th class="text-center">国际</th>
          <th class="text-center">客户/成本中心/项目</th>
          <th class="text-center">出票日期</th>
          <th class="text-center">订票员</th>
          <th class="text-center">出票员</th>
          <th class="text-center">审核人</th>
          <th class="text-center">供应商</th>
          <th class="text-center">付款方式</th>
          <th class="text-center">收款方式</th>
          <th class="text-center">金额</th>
          <th class="text-center">成本</th>
          <th class="text-center">利润</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td class="text-center">{{ detailInfo.billNum }}</td>
          <td class="text-center">
            {{ detailInfo.opDate }}
            <template v-if="detailInfo.audited !== '1'">
              <a
                href="javascript:void(0)"
                @click.stop="editOpDate()"
                class="small"
                >修改</a
              >
            </template>
          </td>
          <td class="text-center">
            <span v-if="detailInfo.intlTicket === 0">国内</span>
            <span class="text-danger" v-else-if="detailInfo.intlTicket === 1"
              >国际</span
            >
          </td>
          <td class="text-center">
            <template v-if="detailInfo.customerType === 0">散客</template>
            <template v-else-if="detailInfo.customer !== null">{{
              detailInfo.customer.vipName
            }}</template>
            /{{ detailInfo.costCenter }}/{{ detailInfo.projectName }}
            <template v-if="detailInfo.audited !== '1'">
              <a
                href="javascript:void(0)"
                @click.stop="changeCustomer()"
                class="small"
                >修改</a
              >
            </template>
          </td>
          <td class="text-center">
            {{ detailInfo.etdzDate }}
            <template v-if="detailInfo.audited !== '1'">
              <a
                href="javascript:void(0)"
                @click.stop="editEtdzDate()"
                class="small"
                >修改</a
              >
            </template>
          </td>
          <td class="text-center">
            {{ detailInfo.op1 }}
            <template v-if="detailInfo.audited !== '1'">
              <a href="javascript:void(0)" @click.stop="editOp1()" class="small"
                >修改</a
              >
            </template>
          </td>
          <td class="text-center">{{ detailInfo.op2 }}</td>
          <td class="text-center">{{ detailInfo.op3 }}</td>
          <td class="text-center">
            <template v-if="detailInfo.supplier !== null">
              {{ detailInfo.supplier.name }}
            </template>
            <template v-if="detailInfo.audited !== '1'">
              <a
                href="javascript:void(0)"
                @click.stop="editSupplier()"
                class="small ps-2"
                >修改</a
              >
            </template>
          </td>
          <td class="text-center">
            <template v-if="detailInfo.paymentMethod !== null">
              {{ detailInfo.paymentMethod.name }}
            </template>
            <template v-if="detailInfo.audited !== '1'">
              <a
                href="javascript:void(0)"
                @click.stop="editPayment()"
                class="small ps-2"
                >修改</a
              >
            </template>
          </td>
          <td class="text-center">
            <span class="text-danger" v-if="detailInfo.bePaid === '0'">
              {{ detailInfo.payTypeNoteDesc }}</span
            >
            <span class="text-success" v-else>{{
              detailInfo.payTypeNoteDesc
            }}</span>
            <template v-if="detailInfo.audited !== '1'">
              <a
                href="javascript:void(0)"
                @click.stop="editPayType()"
                class="small"
                >修改</a
              >
            </template>

            {{ detailInfo.payRemark }}
          </td>
          <td class="text-center">
            {{ detailInfo.billSum }}
          </td>
          <td class="text-center">{{ detailInfo.cost }}</td>
          <td class="text-center">{{ detailInfo.profit }}</td>
        </tr>
      </tbody>
    </table>
    <table class="table table-striped table-hover table-sm">
      <thead>
        <tr>
          <th class="text-center">订单号</th>
          <th class="text-center">原始单号</th>
          <th class="text-center">审核日期</th>
          <th class="text-center">收款状态</th>
          <th class="text-center">付款状态</th>
          <th class="text-center">结算日期/单</th>
          <th class="text-center">销账日期/备注</th>
          <th class="text-center">收款单</th>

          <th class="text-center">录入时间</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td class="text-center">
            <template v-if="isFlightBill">
              {{ detailInfo.orderNo }}
              <router-link
                :to="`/flt/order/0?orderNo=` + detailInfo.orderNo"
                class="text-info"
                >查看</router-link
              >
            </template>
            <template v-else-if="detailInfo.billType === '5'">
              {{ detailInfo.orderNo }}
              <router-link
                :to="`/flt/refund/order/0?orderNo=` + detailInfo.orderNo"
                class="text-info"
                >查看</router-link
              >
            </template>
            <template v-else>
              {{ detailInfo.orderNo }}
            </template>
          </td>
          <td class="text-center">{{ detailInfo.flightOrderNo }}</td>
          <td class="text-center">
            <span
              v-if="detailInfo.audited === '1' && detailInfo.auditDate !== null"
              >{{ detailInfo.auditDate }}</span
            >
            <span v-else-if="detailInfo.audited === '1'">已审核</span>
            <span class="text-danger" v-else>未审核</span>
          </td>
          <td class="text-center">
            <template v-if="detailInfo.bePaid === '0'">
              <span class="text-danger">未收</span>
            </template>
            <template v-else-if="detailInfo.bePaid === '1'">
              <span class="text-success strong">已收</span>
              <button
                class="btn btn-sm btn-danger ms-2"
                @click.stop="undoWriteOff()"
                v-if="isAdmin"
              >
                撤销
              </button>
            </template>
          </td>
          <td class="text-center">
            <span class="text-danger" v-if="detailInfo.paymentStatus === 0"
              >未付</span
            >
            <span class="text-success strong" v-else>
              已付
              <button
                class="btn btn-sm btn-danger ms-2"
                @click.stop="undoFinishPayment()"
                v-if="isAdmin"
              >
                撤销
              </button>
            </span>
          </td>

          <td class="text-center">
            {{ detailInfo.settleDate }}
            <span class="text-info small">{{ detailInfo.settlementNo }}</span>
            <template
              v-if="
                detailInfo.settlementNo !== null &&
                detailInfo.settlementNo.length > 0 &&
                detailInfo.bePaid === '0' &&
                detailInfo.paymentStatus === 0
              "
            >
              <button
                type="button"
                class="btn btn-sm btn-danger"
                @click.stop="delSettlementNo()"
              >
                删除
              </button>
            </template>
          </td>
          <td class="text-center">
            {{ detailInfo.writeOffDate }}
            <span class="text-info small">{{ detailInfo.writeOffMemo }}</span>
          </td>
          <td class="text-center">
            {{ detailInfo.receiptNo }}
          </td>

          <td class="text-center">{{ detailInfo.createTime }}</td>
        </tr>
      </tbody>
    </table>
    <div class="card-body">
      <strong>备注：</strong>
      {{ detailInfo.remark }}
      <a href="javascript:void(0)" @click.stop="editRemark()" class="small ps-2"
        >修改</a
      >
    </div>
    <div class="card-body text-center py-2">
      <template v-if="detailInfo.audited !== '1'">
        <button
          type="button"
          class="btn btn-success"
          @click.stop="auditBillDone()"
        >
          审核通过
        </button>
        <button
          type="button"
          class="btn btn-danger btn-sm float-end"
          @click.stop="deleteBill()"
        >
          删除
        </button>
      </template>
      <template v-else-if="detailInfo.bePaid !== '1'">
        <button
          type="button"
          class="btn btn-success float-start"
          @click.stop="writeOffBill()"
          v-if="isRoot"
        >
          销账(已收款)
        </button>

        <button
          type="button"
          class="btn btn-danger btn-sm float-end"
          @click.stop="cancelBillAudited()"
        >
          取消审核
        </button>
      </template>

      <template v-if="detailInfo.paymentStatus === 0">
        <button
          type="button"
          class="btn btn-primary float-start ms-5"
          @click.stop="finishPayment()"
          v-if="isRoot"
        >
          已付款
        </button>
      </template>
    </div>

    <my-modal-prompt ref="modalPrompt" :nullable="modalNullable">
      <span slot="title">{{ modalTitle }}</span>
    </my-modal-prompt>
    <my-modal-update-customer
      ref="updateCustomerModal"
    ></my-modal-update-customer>
    <my-modal-supplier-update
      ref="updateSupplierModal"
    ></my-modal-supplier-update>
    <my-modal-pay-method-update
      ref="updatePayMethodModal"
    ></my-modal-pay-method-update>
    <my-modal-op1-update ref="updateOp1Modal"></my-modal-op1-update>
    <my-modal-change-date ref="updateDateModal">
      <span slot="title">{{ modalTitle }}</span>
    </my-modal-change-date>
    <my-modal-pay-type ref="modalPayType"></my-modal-pay-type>
  </div>
</template>

<script>
import {
  BILL_FLIGHT,
  BILL_HOTEL,
  BILL_TRAIN,
  BILL_REFUND,
  BILL_VAS,
  BILL_CHANGE,
  BILL_RENTAL_CAR,
} from "@/common/const.js";
import {
  auditBill,
  cancelBillAudited,
  changeBillCustomer,
  deleteBill,
  updateBillInfoSupplier,
  updateBillInfoPaymentMethod,
  updateBillInfoEtdzDate,
  updateBillInfoOp1,
  updateBillInfoRemark,
  updateBillInfoPayType,
  updateBillInfoOpDate,
  delSettlementNo,
  undoWriteOffBill,
  writeOffSingleBill,
  finishBillPayment,
  undoFinishBillPayment,
} from "@/api/bill.js";
import MyModalPrompt from "@/components/modal/my-modal-prompt.vue";
import MyModalSupplierUpdate from "@/components/modal/my-modal-supplier-update.vue";
import MyModalPayMethodUpdate from "@/components/modal/my-modal-pay-method-update.vue";
import MyModalOp1Update from "@/components/modal/my-modal-op1-update.vue";
import MyModalUpdateCustomer from "@/components/modal/my-modal-customer-update.vue";
import MyModalChangeDate from "@/components/modal/my-modal-change-date.vue";
import MyModalPayType from "@/components/modal/my-modal-pay-type.vue";

export default {
  components: {
    MyModalPrompt,
    MyModalSupplierUpdate,
    MyModalPayMethodUpdate,
    MyModalOp1Update,
    MyModalUpdateCustomer,
    MyModalChangeDate,
    MyModalPayType,
  },
  props: {
    detailInfo: {
      type: Object,
    },
  },
  data() {
    return {
      customers: [],
      customerId: 0,

      modalTitle: "",
      modalNullable: false,

      printMode: "0",
    };
  },
  computed: {
    isAdmin() {
      return this.$store.getters.isAdmin;
    },
    isRoot() {
      return this.$store.state.isRoot;
    },
    supplierId: function () {
      if (this.detail === null || this.detailInfo.supplier === null) {
        return 0;
      } else {
        return this.detailInfo.supplier.id;
      }
    },
    payMethodId: function () {
      if (this.detail === null || this.detailInfo.paymentMethod === null) {
        return 0;
      } else {
        return this.detailInfo.paymentMethod.id;
      }
    },
    isFlightBill() {
      return this.detailInfo.billType === BILL_FLIGHT;
    },
    isRefundBill() {
      return this.detailInfo.billType === BILL_REFUND;
    },
    isChangeBill() {
      return this.detailInfo.billType === BILL_CHANGE;
    },
    isHotelBill() {
      return this.detailInfo.billType === BILL_HOTEL;
    },
    isTrainBill() {
      return this.detailInfo.billType === BILL_TRAIN;
    },
    isVasBill() {
      return this.detailInfo.billType === BILL_VAS;
    },
    isCarBill() {
      return this.detailInfo.billType === BILL_RENTAL_CAR;
    },
    id() {
      return this.detailInfo.id;
    },
  },
  methods: {
    back: function () {
      this.$router.go(-1);
    },
    showErrMsg: function (msg, msgType) {
      this.$store.dispatch("showAlertMsg", {
        errMsg: msg,
        errMsgType: msgType,
      });
    },
    refresh: function () {
      this.searchBillDetail();
    },
    searchBillDetail: function () {
      this.$emit("refresh");
    },
    auditBillDone: function () {
      auditBill(this.id, (v) => this.commonShowMessage(v));
    },
    cancelBillAudited: function () {
      this.modalTitle = "请输入取消审核的原因";
      this.$refs.modalPrompt
        .modal()
        .then((remark) => {
          cancelBillAudited(this.id, { remark }, (v) =>
            this.commonShowMessage(v)
          );
        })
        .catch((ex) => {});
    },
    changeCustomer: function () {
      this.$refs.updateCustomerModal
        .modal(0)
        .then((info) => {
          changeBillCustomer(
            this.id,
            {
              customerId: info.customerId,
              costCenter: info.costCenter,
              projectName: info.projectName,
            },
            (v) => this.commonShowMessage(v)
          );
        })
        .catch((ex) => {});
    },
    deleteBill: function () {
      this.modalTitle = "确定要删除此账单？";
      this.$refs.modalPrompt
        .modal("YesOrNo")
        .then((remark) => {
          this.doDeleteBill();
        })
        .catch((ex) => {});
    },
    doDeleteBill: function () {
      deleteBill(this.id, (jsonResult) => {
        if (jsonResult.status === "OK") {
          this.showErrMsg("删除成功");
          this.back();
        } else {
          this.showErrMsg("删除失败: " + jsonResult.errmsg);
        }
      });
    },
    commonShowMessage: function (jsonResult) {
      if (jsonResult.status === "OK") {
        this.showErrMsg("操作成功");
        this.searchBillDetail();
      } else {
        this.showErrMsg("操作失败: " + jsonResult.errmsg);
      }
    },
    editSupplier: function () {
      this.$refs.updateSupplierModal
        .modal(this.supplierId)
        .then((info) => {
          updateBillInfoSupplier(
            this.id,
            { supplierId: info.supplierId },
            (v) => this.commonShowMessage(v)
          );
        })
        .catch((ex) => {});
    },
    editPayment: function () {
      this.$refs.updatePayMethodModal
        .modal(this.payMethodId)
        .then((info) => {
          updateBillInfoPaymentMethod(
            this.id,
            { paymentMethodId: info.payMethodId },
            (v) => this.commonShowMessage(v)
          );
        })
        .catch((ex) => {});
    },
    editEtdzDate: function () {
      this.modalTitle = "请输入新的出票日期（格式示例：2017-01-08)：";
      this.$refs.updateDateModal
        .modal()
        .then((remark) => {
          updateBillInfoEtdzDate(this.id, { etdzDate: remark }, (v) =>
            this.commonShowMessage(v)
          );
        })
        .catch((ex) => {});
    },
    editOp1: function () {
      this.$refs.updateOp1Modal
        .modal(this.detailInfo.op1)
        .then((info) => {
          updateBillInfoOp1(this.id, { op1: info.op1 }, (v) =>
            this.commonShowMessage(v)
          );
        })
        .catch((ex) => {});
    },
    editRemark: function () {
      this.modalTitle = "请输入新的账单备注：";
      this.$refs.modalPrompt
        .modal()
        .then((remark) => {
          updateBillInfoRemark(this.id, { remark: remark }, (v) =>
            this.commonShowMessage(v)
          );
        })
        .catch((ex) => {});
    },
    editPayType: function () {
      this.$refs.modalPayType
        .modal(this.detailInfo.payTypeNote)
        .then((payType) => {
          updateBillInfoPayType(this.id, { payType: payType }, (v) =>
            this.commonShowMessage(v)
          );
        })
        .catch((ex) => {});
    },
    editOpDate: function () {
      this.modalTitle = "请输入新的账单日期（格式示例：2017-01-08)：";
      this.$refs.updateDateModal
        .modal()
        .then((remark) => {
          updateBillInfoOpDate(this.id, { opDate: remark }, (v) =>
            this.commonShowMessage(v)
          );
        })
        .catch((ex) => {});
    },
    delSettlementNo: function () {
      this.modalTitle = "确定从结算单中移除吗？";
      this.$refs.modalPrompt
        .modal("YesOrNo")
        .then(() => {
          delSettlementNo(this.id, (v) => this.commonShowMessage(v));
        })
        .catch((ex) => {});
    },
    writeOffBill: function () {
      writeOffSingleBill(this.id, (v) => {
        if (v.status !== "OK") {
          this.showErrMsg(v.errmsg, "danger");
        } else {
          this.showErrMsg("操作成功");
          this.refresh();
        }
      });
    },
    undoWriteOff: function () {
      this.modalTitle = "确定撤销销账吗？请输入 OK";

      this.$refs.modalPrompt
        .modal("")
        .then((remark) => {
          const params = {
            billId: this.id,
            remark: remark,
          };
          console.log(params);

          undoWriteOffBill(params, (v) => {
            if (v.status !== "OK") {
              this.showErrMsg(v.errmsg, "danger");
            } else {
              this.showErrMsg("操作成功");
              this.refresh();
            }
          });
        })
        .catch((ex) => {});
    },
    finishPayment: function () {
      //完成支付
      finishBillPayment(this.id, (v) => {
        if (v.status !== "OK") {
          this.showErrMsg(v.errmsg, "danger");
        } else {
          this.showErrMsg("操作成功");
          this.refresh();
        }
      });
    },
    undoFinishPayment: function () {
      undoFinishBillPayment(this.id, (v) => {
        if (v.status !== "OK") {
          this.showErrMsg(v.errmsg, "danger");
        } else {
          this.showErrMsg("操作成功");
          this.refresh();
        }
      });
    },
  },
};
</script>